<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash-icon.png">
<link rel="apple-touch-startup-image" href="images/splash-screen.png" 			media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash-screen@2x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>
<title>Epsilon Mobile Framework - Version 2.0</title>
<link href="css/style.css"     		 rel="stylesheet" type="text/css">
<link href="css/framework.css" 		 rel="stylesheet" type="text/css">
<link href="css/menu.css" 		 	 rel="stylesheet" type="text/css">
<link href="css/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="css/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="css/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="css/animate.css"			 rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/framework.plugins.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="preloader">
	<div id="status">
    	<p class="center-text">
			正在加载中...
            <em>尊敬的大人:小人正在努力奔跑中 还请稍等</em>
        </p>
    </div>
</div>
<div class="all-elements">
<div id="perspective" class="perspective effect-airbnb"><!--this houses the entire page, and creates the effect-->
    <div class="header">
        <a href="#" id="showMenu"><i class="fa fa-navicon"></i></a>
        <a href="#" id="pageLogo"><img src="images/z.png" alt="img"></a>
        <a href="#" id="openMail"><i class="fa fa-envelope-o"></i></a>
    </div> 	
    <div class="outer-nav">
        <div class="inner-nav">
            <div class="nav-item">
                <a href="index.html">
                    <i class="nav-icon fa fa-home"></i>
                    Home
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item active-item">
                    <i class="nav-icon fa fa-cog"></i>
                    Features
                </a>
                <div class="nav-sub-item nav-sub-active">
                    <a href="features-type.html">Type</a>
                    <a class="active-item" href="features-jquery.html">jQuery</a>
                    <a href="features-others.html">Others</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-camera"></i>
                    Gallery
                </a>
                <div class="nav-sub-item">
                    <a href="gallery-wide.html">Thumbs Wide</a>
                    <a href="gallery-round.html">Thumbs Round</a>
                    <a href="gallery-square.html">Thumbs Square</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-picture-o"></i>
                    Portfolio
                </a>
                <div class="nav-sub-item">
                    <a href="portfolio-adaptive.html">Adaptive</a>
                    <a href="portfolio-one.html">One Column</a>
                    <a href="portfolio-two.html">Two Columns</a>
                    <a href="portfolio-wide.html">Wide Columns</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-files-o"></i>
                    Pages
                </a>
                <div class="nav-sub-item">
                    <a href="page-soon.html">Soon Page</a>
                    <a href="page-error.html">Error Page</a>
                    <a href="page-profile.html">Profile Page</a>
                    <a href="page-timeline.html">Timeline Page</a>
                    <a href="page-updates.html">Updates Page</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="contact.html">
                    <i class="nav-icon fa fa-envelope"></i>
                    Contact
                </a>
            </div>
            <div class="nav-item">
                <a id="closeMenu" href="#">
                    <i class="nav-icon fa fa-times"></i>
                    Close
                </a>
            </div>
        </div>
    </div>
    <div class="perspective_container"><!--the "moving to the left" content box-->
        <div class="wrapper"><!-- wrapper needed for scroll -->
         	<div class="header-clear"><i class="fa fa-times"></i></div>
			<div class="decoration"></div>
            
            <div class="content">
                <div class="one-half-responsive">
                    <div class="container half-bottom">
                        <h4>Checkboxes and radio buttons</h4>
                        <p>Checkboxes are cute and important, we offer a few variety of styles!</p>
                        <div class="one-half">
                            <a href="#" class="checkbox checkbox-one">Checkbox</a>
                            <a href="#" class="checkbox checkbox-two">Checkbox</a>
                            <a href="#" class="checkbox checkbox-three">Checkbox</a>
                            <a href="#" class="checkbox checkbox-one checkbox-one-checked">Checkbox</a>
                            <a href="#" class="checkbox checkbox-two checkbox-two-checked">Checkbox</a>
                            <a href="#" class="checkbox checkbox-three checkbox-three-checked">Checkbox</a>
                        </div>
                        <div class="one-half last-column">
                            <a href="#" class="checkbox radio-one">Radio</a>
                            <a href="#" class="checkbox radio-two">Radio</a>
                            <a href="#" class="checkbox checkbox-three">Checkbox</a>
                            <a href="#" class="checkbox radio-one radio-one-checked">Radio</a>
                            <a href="#" class="checkbox radio-two radio-two-checked">Radio</a>
                            <a href="#" class="checkbox checkbox-three checkbox-three-checked">Checkbox</a>
                        </div>
                    </div>  
                </div>
                <div class="decoration hide-if-responsive"></div>
                <div class="one-half-responsive last-column">
                    <div class="container">
                        <h4>Tabs</h4>
                        <p>Tabs are awesome, but having them plugin-less is more amazing!</p>
                        <div class="tabs">
                            <a href="#" class="tab-but tab-but-1 tab-active">Tab 1</a>
                            <a href="#" class="tab-but tab-but-2">Tab 2</a>
                            <a href="#" class="tab-but tab-but-3">Tab 3</a>
                            <a href="#" class="tab-but tab-but-4">Tab 4</a>     
                        </div>
                        <div class="tab-content tab-content-1">
                            <p>
                                <img src="images/1s.jpg" class="float-left" width="70" alt="img">
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            </p>
                        </div>
                        <div class="tab-content tab-content-2">
                            <p>
                                <img src="images/2s.jpg" class="float-left" width="70" alt="img">
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.                    
                            </p>
                        </div>
                        <div class="tab-content tab-content-3">
                            <p>
                                <img src="images/3s.jpg" class="float-left" width="70" alt="img">
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.                    
                            </p>
                        </div>
                        <div class="tab-content tab-content-4">
                            <p>
                                <img src="images/4s.jpg" class="float-left" width="70" alt="img">
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                                Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.                    
                            </p>
                        </div>       
                    </div>      
                </div>
                
                <div class="decoration"></div>
                       
                <div class="container no-bottom">
                    <h4>Toggles and Dropdowns!</h4>
                    <p>This is a huge set of awesomely CSS3 coded dropdowns and toggles!</p>
                </div>
                
                <div class="one-half-responsive">
                    <div class="container">
                        <div class="submenu-navigation">
                            <a href="#" class="submenu-nav-deploy">Deploy Submenu</a>
                            <div class="submenu-nav-items">
                                <a href="#">Item 1</a>
                                <a href="#">Item 2</a>
                                <a href="#">Item 3</a>
                            </div>
                        </div>
                    </div>
                
                    <div class="container">
                        <div class="toggle-3">
                            <a href="#" class="deploy-toggle-3">This is content toggle<em><strong></strong></em></a>
                            <div class="toggle-content">
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                    when an unknown printer took a galley of type and scrambled specimen book.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="one-half-responsive last-column">
                    <div class="container">
                        <div class="toggle-1">
                            <a href="#" class="deploy-toggle-1">This is content toggle</a>
                            <div class="toggle-content">
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                    when an unknown printer took a galley of type and scrambled specimen book.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="container">
                        <div class="toggle-2">
                            <a href="#" class="deploy-toggle-2">This is content toggle</a>
                            <div class="toggle-content">
                                <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                    when an unknown printer took a galley of type and scrambled specimen book.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            
                <div class="decoration"></div>
            
                <div class="container no-bottom">
                    <h4 class="heading-icon">Door sliders!</h4>
                    <p>Try this for a great anti bot method! Interaction required!</p>
                    
                    <div class="one-half-responsive">
                        <div class="sliding-door">
                            <div class="sliding-door-top">
                                <a href="#"><em></em>
                                    Tap to show number!
                                </a>
                            </div>    
                            <div class="sliding-door-bottom">
                                <a href="tel:+12 345 7890"><em></em>
                                    <strong>Call us:</strong> 
                                    +1 555 354 7890
                                </a>
                            </div>
                        </div>
                        <div class="sliding-door-clear"></div>
                    </div>
                    <div class="one-half-responsive last-column">
            
                        <div class="sliding-door">
                            <div class="sliding-door-top">
                                <a href="#"><em></em>
                                    Tap to show email!
                                </a>
                            </div>    
                            <div class="sliding-door-bottom">
                                <a href="mailto:name@domain.com"><em></em>
                                    <strong>Mail us:</strong> 
                                    mail@domain.com
                                </a>
                            </div>
                        </div>
                        <div class="sliding-door-clear"></div>
                    </div>
                </div> 
                
                <div class="decoration"></div>
                
                <div class="container no-bottom">
                    <h4>Big notifications!</h4>
                    <p>These notifications can be shown but they cannot be dismissed by tapping or closing!</p>
                    <div class="one-half-responsive">
                        <div class="big-notification red-notification">
                            <h4 class="uppercase">Notification Title</h4>
                            <a href="#" class="close-big-notification">x</a>
                            <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
                        </div>
                        <div class="big-notification green-notification">
                            <h4 class="uppercase">Notification Title</h4>
                            <a href="#" class="close-big-notification">x</a>
                            <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
                        </div>
                    </div>
                    <div class="one-half-responsive last-column">
                        <div class="big-notification yellow-notification">
                            <h4 class="uppercase">Notification Title</h4>
                            <a href="#" class="close-big-notification">x</a>
                            <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
                        </div>
                        <div class="big-notification blue-notification">
                            <h4 class="uppercase">Notification Title</h4>
                            <a href="#" class="close-big-notification">x</a>
                            <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
                        </div>  
                    </div> 
                </div> 
                
                <div class="decoration"></div>
                
                <div class="container no-bottom">
                    <h4>Small tap to dismiss notifications!</h4>
                    <p>These notifications can be shown but they cannot be dismissed by tapping or closing!</p>
                    <div class="one-half-responsive">
                        <div class="static-notification-red tap-dismiss-notification">
                            <p class="center-text uppercase">A red notification! Dismiss!</p>
                        </div>
                        <div class="static-notification-green tap-dismiss-notification">
                            <p class="center-text uppercase">A green notification! Dismiss!</p>
                        </div>
                    </div>
                    <div class="one-half-responsive last-column">
                        <div class="static-notification-yellow tap-dismiss-notification">
                            <p class="center-text uppercase">A yellow notification! Dismiss!</p>
                        </div>
                        <div class="static-notification-blue tap-dismiss-notification">
                            <p class="center-text uppercase">A blue notification! Dismiss!</p>
                        </div>  
                    </div>  
                </div>   
                
                <div class="decoration"></div>
                <div class="footer-section">
                    <p class="footer-text">
                        Copyright 2014.<br>
                        All rights reserved.
                    </p>
                    <div class="footer-icons">
                        <a href="#" class="footer-facebook-icon"><i class="fa fa-facebook"></i></a>
                        <a href="#" class="footer-google-icon"><i class="fa fa-google-plus"></i></a>
                        <a href="#" class="footer-twitter-icon"><i class="fa fa-twitter"></i></a>
                        <a href="#" class="footer-up-icon"><i class="fa fa-angle-up"></i></a>
                    </div>
                </div>
        	</div><!--content-->
        </div><!-- wrapper -->
    </div><!-- /perspective container -->
</div><!-- /perspective -->
</div>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>
